<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>储值规则设置</title>
    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/tabletable.css" rel="stylesheet" />
    <link href="../assets/css/imagebox/image_box.css" rel="stylesheet" />
    <link href="css/收银对账.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.min.js"></script>
          <script src="../assets/js/respond.min.js"></script>
          <![endif]-->
  </head>

  <body>
    <!--内容区域-->
    <div class="content">

      <!-- 头部的餐厅选择 -->
      <div class="content-header col-md-12">
        <div class="con-header">
          <div class="col-md-7 col-sm-7 col-xs-7">
            <span class="content-title-pre"></span><span class="content-title-word">储值规则设置</span>
          </div>
          <div class="col-md-5 col-sm-5 col-xs-5">
            <button type="button" class="btn btn-info btn-header" data-toggle="modal" data-target="#add_store">添加+</button>
          </div>
        </div>
      </div>
      <div class="row"></div>
      <!-- botstrop 的内容 -->
      <div class="chargetable">
        <div class="table-responsive mt20">
          <table class="table">
            <thead class="tablethead">
              <tr>
                <th class="firstth" valign="middle">序号</th>
                <th class="secondta">充值金额</th>
                <th>排序</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody class="mytable">
              <tr>
                <td class="firsttd" valign="middle">01</td>
                <td class="secondta">1000元</td>
                <td>ES120120</td>
                <td class="text-center">
                  <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table red">删除</button>
                </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">01</td>
                <td class="secondta">1000元</td>
                <td>ES120120</td>
                <td class="text-center">
                  <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table red">删除</button>
                </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">01</td>
                <td class="secondta">1000元</td>
                <td>ES120120</td>
                <td class="text-center">
                  <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table red">删除</button>
                </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">01</td>
                <td class="secondta">1000元</td>
                <td>ES120120</td>
                <td class="text-center">
                  <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table red">删除</button>
                </td>
              </tr>
              <tr>
                <td class="firsttd" valign="middle">01</td>
                <td class="secondta">1000元</td>
                <td>ES120120</td>
                <td class="text-center">
                  <button type="button" class="btn btn-default btn-table">编辑</button>
                  <span class="button-pre"></span>
                  <button type="button" class="btn btn-default btn-table red">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
          <div class="page-page flr">
            <ul class="pagination">
              <li class="epage">
                <a href="#">上一页</a>
              </li>
              <li class="active">
                <a href="#">1 <span class="sr-only">(current)</span></a>
              </li>
              <li>
                <a href="#">2</a>
              </li>
              <li>
                <a href="#">3</a>
              </li>
              <!--<li><a href="#">4</a></li>-->
              <li>
                <a href="#">...</a>
              </li>
              <li class="epage">
                <a href="#">下一页</a>
              </li>
            </ul>
          </div>
          <div class="page-num flr">共9页，每页10条</div>
        </div>
      </div>
      <script src="../assets/js/jquery.min.js"></script>
      <script src="../assets/js/bootstrap.min.js"></script>
      <script type="text/javascript">
        colorStyle();
      // 给奇数行和偶数行不同的颜色
      function colorStyle(){
        $(".mytable").find("tr:even").addClass("oushu");
        $(".mytable").find("tr:odd").addClass("jishu");
        $(".mytable").find("tr:odd td:first-child").addClass("jishu");
      }

      // 给第一列高度
      firstTrHeight()
      function firstTrHeight() {
        for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
          var trht = $(".mytable tr")[i].offsetHeight
          var domtr = $(".mytable tr")[i];
          // 有30px的边距
          $(domtr).children('td').height(trht - 30);
          $(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
        };
      }
      </script>
  </body>

</html>